<template>
  <div id="bzzy">
    <div class="con-middle">
      <Left-Chart-1 :depCode="depCode" :options="options" />
      <xzbz-rate :depCode="depCode" :options="options" />
      <zfbz-rate :depCode="depCode" :options="options" />
      <sybz-rate :depCode="depCode" :options="options" />
    </div>
    <div class="con-bottom">
      <Center-Cmp :depCode="depCode" />
      <tree-year-kbdw :depCode="depCode" />
    </div>
  </div>
</template>
<script>
import CenterCmp from './CenterCmp'
import LeftChart1 from './LeftChart1'
import xzbzRate from './xzbzRate'
import zfbzRate from './zfbzRate'
import sybzRate from './sybzRate'
import treeYearKbdw from './treeYearKbdw'

import Sever from '@/api/selfApi'
export default {
  name: 'DataView',
  components: {
    CenterCmp,
    LeftChart1,
    xzbzRate,
    zfbzRate,
    sybzRate,
    treeYearKbdw
  },
  props: {
    depCode: {
      type: String
    }
  },
  data() {
    return {
      options: [
        {
          FY_BZ: 0,
          GA_BZ: 0,
          JCY_BZ: 0,
          SF_BZ: 0,
          SY_BZ: 0,
          XZ_BZ: 0
        },
        {
          FY_DFP: 0,
          GA_DFP: 0,
          JCY_DFP: 0,
          SF_DFP: 0,
          SY_DFP: 0,
          XZ_DFP: 0
        }
      ]
    }
  },
  watch: {
    depCode(newValue, oldValue) {
      this.initData()
    }
  },
  mounted() {
    this.initData()
  },
  methods: {
    async initData() {
      //请求后台返回数据
      try {
        //请求后台接口
        const res = await Sever.bzzy.getTotalBzrsNum({
          dep_code: this.depCode
        })
        console.log(res)
        //赋值给变量
        this.options = res
      } catch (error) {
        console.log(error)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
#bzzy {
  width: 100%;
  height: calc(100% - 80px);
  background-size: 100% 100%;

  .con-top {
    width: 100%;
    height: 50px;
    text-align: right;
    padding-right: 20px;
  }
  .con-middle {
    width: 100%;
    height: calc(50% - 30px);
    margin-top: 15px;
    margin-bottom: 15px;
    display: flex;
    //   background: rgba(0, 18, 67, 0.4);
  }
  .con-bottom {
    width: 100%;
    height: calc(50% - 15px);
    display: flex;
  }
}
</style>